<!--
 * @Descripttion: 
 * @Author: yizheng.yuan
 * @Date: 2019-08-28 18:05:50
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-12-31 23:40:45
-->
<html>

<head>
  <title>图片上传表单</title>
  <script src="./js/jquery.min.js"></script>
</head>

<body>

  <h1>演示2种方式进行图片上传：</h1>
  <hr/>


  <h3>1.图片上传：From表单</h3>
  选择一个图片上传: <br />
  <form action="/fileUpload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" size="50" />
    <br />
    <input type="submit" value="上传图片" />
  </form>

  <hr />
  <h3>2.图片上传：Jquery方法(更佳)</h3>
  选择一个图片上传: <br />
  <input type="file" id="fileInput" name="image" size="50" />
  <!-- <br />
		<input type="submit" value="上传图片" /> -->


  <script>
    console.log('jq:', $)
    let fileId = document.getElementById('fileInput');
    fileId.onchange = function (e) {
      console.error('上传改变：', e.target.files);
      uploadFun(e.target.files)
    }

    function uploadFun(files) {
      var formData = new FormData();
      formData.append("file", files[0]);
      formData.append("name", '图片名称');
      $.ajax({
        url: 'http://localhost:7070/fileUpload', /*接口域名地址*/
        type: 'post',
        data: formData,
        contentType: false,
        processData: false,
        success: function (res) {
          console.log('成功：', res);
          alert('上传成功！')
        },
        fail: function (e) {
          console.error('失败：', e);
          alert('上传失败！')
        }
      })
    }

      // 准备上传数据

  </script>
</body>

</html>